'use client'
import React, {useRef} from 'react'
import { AlignRight } from 'lucide-react'
import Link from 'next/link'
import { usePathname } from 'next/navigation';

export default function HeaderClientMobile({navigations, className }) {
  const ref = useRef(null);
  const pathname = usePathname();
  const handleToggle = () => {
    ref.current.checked = !ref.current.checked;
  }
  return (
    <div className={`drawer w-14 ${className}`}>
      <input id="my-drawer" type="checkbox" className="drawer-toggle"  ref={ref}/>
      <div className="drawer-content">
        <label htmlFor="my-drawer" className="btn bg-[#F1F1F1] border-none w-12 h-9"><AlignRight /></label>
      </div>
      <div className="drawer-side">
        <label htmlFor="my-drawer" aria-label="close sidebar" className="drawer-overlay"></label>
        <div className="menu bg-[#F1F1F1] text-base-content min-h-full w-80 p-4">
          <ul className='flex flex-col gap-1 w-full'>
            {navigations?.header?.map((item) =>
              item.status === 0 && (
                <li key={item.url} className={`h-full flex items-left`}>
                  <Link href={item.url} className={`py-3 w-auto box-border ${item.url === '/' ? (pathname === '/' ? 'bg-[var(--theme-color)] text-white' : 'bg-white') : (pathname.startsWith(item.url) && item.url !== '/' ? 'bg-[var(--theme-color)] text-white' : 'bg-white')}`} onClick={handleToggle}> {item.name} </Link>
                  { item.children?.length > 0 && (
                    <ul className='flex flex-col gap-1 w-full pt-1 x-menu-ul pl-4  before:left-2'>
                      {item.children.map(
                        (child) => child.status === 0 && (
                          <li key={child.url} className=''>
                            <Link href={child.url} className={`py-3 ${pathname === child.url ? 'bg-[var(--theme-color)] text-white' : 'bg-white'}`} onClick={handleToggle}> {child.name} </Link>
                          </li>
                        )
                      )}
                    </ul>
                  )}
                </li>
              )
            )}
          </ul>
        </div>
      </div>
    </div>
  )
}
